<template>
    <div class="vip-membership">
        <header class="header">
            <router-link to="/">
                <h1>VIP 会员开通</h1>
            </router-link>
        </header>

        <div class="description">
            <div class="content">欢迎加入我们的VIP会员，享受更多专属权益! 加入VIP会员，您将获得以下权益：专属折扣、优先客服支持、定期会员活动、专属权益。</div>
            <button @click="openMembership">开通会员</button>
        </div>

        <section class="benefits">
            <h2>会员权益</h2>
            <ul class="benefits-list">
                <li class="flip-item">
                    <div class="flip-inner">
                        <div class="flip-front">专属折扣</div>
                        <div class="flip-back">优惠信息详情</div>
                    </div>
                </li>
                <li class="flip-item">
                    <div class="flip-inner">
                        <div class="flip-front">优先客服支持</div>
                        <div class="flip-back">客服支持详情</div>
                    </div>
                </li>
                <li class="flip-item">
                    <div class="flip-inner">
                        <div class="flip-front">定期会员活动</div>
                        <div class="flip-back">活动信息详情</div>
                    </div>
                </li>
                <li class="flip-item">
                    <div class="flip-inner">
                        <div class="flip-front">专属权益</div>
                        <div class="flip-back">权益信息详情</div>
                    </div>
                </li>
            </ul>
        </section>

        <section class="background-images">
            <div class="image" v-for="(image, index) in images" :key="index"
                :style="{ backgroundImage: 'url(' + image + ')' }">
                <div class="image-left">
                    <span class="neon blue">Mr.chen</span>
                    <span>专属折扣</span>
                    <span>优先客服支持</span>
                    <span>定期会员活动</span>
                    <span>专属权益</span>
                </div>
                <div class="image-right">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.i-fmhou4ki-Oxtx7Zay9HgHaLG?rs=1&pid=ImgDetMain"
                        alt="">
                </div>
            </div>
        </section>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { NMarquee } from 'naive-ui'
const images = ref([
    'https://pic.52112.com/2019/08/22/EPS-190822_141/oODFiAhMnP_small.jpg', // 替换为你自己的图片地址
    'https://pic.52112.com/2019/08/22/EPS-190822_141/lFbQgYouOC_small.jpg',
    'https://pic.52112.com/2019/08/22/EPS-190822_141/oODFiAhMnP_small.jpg',
    'https://pic.52112.com/2019/08/22/EPS-190822_141/lFbQgYouOC_small.jpg',
]);

const openMembership = () => {
    alert('开通会员成功!');
}
</script>

<style scoped lang="scss">
@import url(https://fonts.googleapis.com/css?family=League+Script);
$color-background: #333;
$color-blue-main: #ebffff;
$color-purple-main: #ccccff;
$color-red-main: #ff0009;
$color-white: #fff;
$font-cursive: 'League Script', cursive;
$black-shadow-oppacity: rgba(0, 0, 0, 0.5);

//Mixin
@function shadow-caculation($color-main) {
    // calculate neon shadow color
    @return darken(desaturate(adjust-hue($color-main, 31deg), 31), 42)
}

@function shadow-caculation-darker($color-main) {
    // calculate neon shadow color
    @return darken(desaturate(adjust-hue($color-main, 31deg), 31), 50)
}

@mixin animation-pulse($color-main) {
    $animation-name: unique-id();
    animation-name: $animation-name;

    @keyframes #{$animation-name} {
        from {
            text-shadow: 2px 2px 1px $black-shadow-oppacity, 0 0 20px $color-white, 0 0 10px shadow-caculation($color-main), 0 0 50px shadow-caculation($color-main);
        }

        to {
            text-shadow: 0 0 5px $color-white, 0 0 10px $color-white, 0 0 15px $color-white, 0 0 20px shadow-caculation-darker($color-main), 0 0 35px shadow-caculation-darker($color-main), 0 0 40px shadow-caculation-darker($color-main), 0 0 50px shadow-caculation-darker($color-main), 0 0 75px shadow-caculation-darker($color-main);
        }
    }
}

@mixin neonMe($color-main) {
    // random template for neon
    color: $color-main;
    text-shadow: 2px 2px 1px $black-shadow-oppacity, 0 0 20px $color-white, 0 0 10px shadow-caculation($color-main), 0 0 50px shadow-caculation($color-main);
    animation: 1.5s ease-in-out infinite alternate;
}

.neon {
    font-family: $font-cursive;
    font-size: 1em;
    line-height: 1em;
    text-align: center;

    &.blue {
        @include neonMe($color-blue-main);
        @include animation-pulse($color-blue-main);
    }

    &.purple {
        @include neonMe($color-purple-main);
        @include animation-pulse($color-purple-main);
    }

    &.red {
        @include neonMe($color-red-main);
        @include animation-pulse($color-red-main);
    }
}

.vip-membership {
    text-align: center;
    overflow: hidden;
}

.header {
    background-image: linear-gradient(to right, #434343 0%, black 100%);
    padding: 20px;
    text-align: left;

    h1 {
        color: white;
        font-size: 36px;
    }
}

.description {
    margin: 20px 0;

    .content {
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        /* 防止换行 */
        animation: scrollText 60s linear infinite;
    }

    @keyframes scrollText {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    background: #e5cc65 url() no-repeat -36px -30px / 148px auto;
    color: white;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    width: 30%;
    height: 50px;

    &:hover {
        background-color: wheat;
    }
}

.benefits {
    margin: 20px 0;

    .benefits-list {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;

        .flip-item {
            border-radius: 20px;
            perspective: 1000px;
            cursor: pointer;
            transition: transform 0.6s;
            list-style: none;
            height: 200px;
            width: 200px;
            line-height: 200px;
            color: #444;
            font-size: 24px;

            &:hover .flip-inner {
                transform: rotateY(180deg);
            }

            .flip-inner {
                position: relative;
                width: 100%;
                height: 100%;
                transition: transform 0.6s;
                /* 添加过渡效果 */
                transform-style: preserve-3d;
                /* 保持3D效果 */
            }

            .flip-front,
            .flip-back {
                position: absolute;
                width: 100%;
                height: 100%;
                backface-visibility: hidden;
                /* 隐藏背面 */
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 24px;
                border: 1px solid #ccc;
                border-radius: 10px;
            }

            .flip-front {
                background-image: linear-gradient(to right, #434343 0%, black 100%);
                /* 正面样式 */
            }

            .flip-back {
                background-color: #f0f0f0;
                /* 背面样式 */
                transform: rotateY(180deg);
                /* 背面翻转180度 */
            }
        }
    }
}

.background-images {
    display: flex;
    flex-direction: column;
    /* 每张图片单独占一行 */
    align-items: center;
}

.image {
    width: 100%;
    /* 设置图片块的宽度为100% */
    height: 500px;
    /* 高度设置为400px */
    background-size: cover;
    /* 图片覆盖整个块 */
    background-position: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    /* 添加过渡效果 */
    background-attachment: fixed;
    /* 背景固定 */
    z-index: 1;
    position: relative;

    .image-left {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 100px;
        left: 200px;
        font-size: 50px;
        color: white;
        letter-spacing: 10px;
        user-select: text;
    }

    .image-right {
        position: absolute;
        right: 100px;
        top: 50px;

        img {
            width: 100%;
            height: 400px;
        }
    }
}
</style>